<template>
  <div style="width: 100%; height: 100%" id="chinaMap">中国地图</div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts';

import zhongguo from '@/data/map/data-china.json';
import hainan from '@/data/map/data-hainan.json';
import xizang from '@/data/map/data-xizang.json';
import zhejiang from '@/data/map/data-zhejiang.json';
import yunnan from '@/data/map/data-yunnan.json';
import xinjiang from '@/data/map/data-xinjiang.json';
import tianjin from '@/data/map/data-tianjin.json';
import sichuan from '@/data/map/data-sichuan.json';
import shanxi from '@/data/map/data-shanxi.json';
import shangxi from '@/data/map/data-shangxi.json';
import shanghai from '@/data/map/data-shanghai.json';
import shangdong from '@/data/map/data-shangdong.json';
import qinghai from '@/data/map/data-qinghai.json';
import ningxia from '@/data/map/data-ningxia.json';
import neimenggu from '@/data/map/data-neimenggu.json';
import liaoning from '@/data/map/data-liaoning.json';
import jilin from '@/data/map/data-jilin.json';
import jiangxi from '@/data/map/data-jiangxi.json';
import jiangsu from '@/data/map/data-jiangsu.json';
import hunan from '@/data/map/data-hunan.json';
import hubei from '@/data/map/data-hubei.json';
import henan from '@/data/map/data-henan.json';
import heilongjiang from '@/data/map/data-heilongjiang.json';
import hebei from '@/data/map/data-hebei.json';
import guizhou from '@/data/map/data-guizhou.json';
import guangxi from '@/data/map/data-guangxi.json';
import guangdong from '@/data/map/data-guangdong.json';
import gansu from '@/data/map/data-gansu.json';
import chongqing from '@/data/map/data-chongqing.json';
import aomen from '@/data/map/data-aomen.json';
import anhui from '@/data/map/data-anhui.json';
import beijing from '@/data/map/data-beijing.json';
import fujian from '@/data/map/data-fujian.json';
import xianggang from '@/data/map/data-xianggang.json';
import { onMounted } from 'vue';

defineOptions({
  name: 'ProjectDistributionMap',
});

const cityMap: Record<string, unknown> = {
  中国: zhongguo,
  上海: shanghai,
  河北: hebei,
  山西: shangxi,
  内蒙古: neimenggu,
  辽宁: liaoning,
  吉林: jilin,
  黑龙江: heilongjiang,
  江苏: jiangsu,
  浙江: zhejiang,
  安徽: anhui,
  福建: fujian,
  江西: jiangxi,
  山东: shangdong,
  河南: henan,
  湖北: hubei,
  湖南: hunan,
  广东: guangdong,
  广西: guangxi,
  海南: hainan,
  四川: sichuan,
  贵州: guizhou,
  云南: yunnan,
  西藏: xizang,
  陕西: shanxi,
  甘肃: gansu,
  青海: qinghai,
  宁夏: ningxia,
  新疆: xinjiang,
  北京: beijing,
  天津: tianjin,
  重庆: chongqing,
  香港: xianggang,
  澳门: aomen,
};

const mapInit = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('chinaMap'));

  const mapOption = {
    title: {
      text: '鹿鲸项目推广作战地图',
      left: 'center',
      top: '60px',
      textStyle: {
        color: '#fff',
        fontSize: '28px',
      },
    },
    backgroundColor: '#154e90',
    tooltip: {
      show: true,
      trigger: 'item',
      alwaysShowContent: false,
      backgroundColor: 'rgba(50,50,50,0.7)',
      hideDelay: 100,
      triggerOn: 'mousemove',
      enterable: true,
      position: ['60%', '70%'],
    },
    graphic: [
      {
        type: 'group',
        left: 198,
        top: 46,
        children: [
          {
            type: 'line',
            left: 0,
            top: -20,
            shape: {
              x1: 0,
              y1: 0,
              x2: 60,
              y2: 0,
            },
            style: {
              stroke: 'rgba(147, 235, 248, .8)',
            },
          },
          {
            type: 'line',
            left: 0,
            top: 20,
            shape: {
              x1: 0,
              y1: 0,
              x2: 60,
              y2: 0,
            },
            style: {
              stroke: 'rgba(147, 235, 248, .8)',
            },
          },
        ],
      },
      {
        id: '中国',
        type: 'group',
        left: 200,
        top: 50,
        children: [
          {
            type: 'polyline',
            left: 90,
            top: -12,
            shape: {
              points: [
                [0, 0],
                [8, 11],
                [0, 22],
              ],
            },
            style: {
              stroke: 'transparent',
              key: '中国',
            },
          },
          {
            type: 'text',
            left: 0,
            top: 'middle',
            style: {
              text: '中国',
              textAlign: 'center',
              fill: '#eee',
              font: "18px 'Microsoft YaHei', sans-serif",
            },
          },
          {
            type: 'text',
            left: 0,
            top: 10,
            style: {
              text: 'China',
              textAlign: 'center',
              fill: '#eee',
              font: "12px 'Microsoft YaHei', sans-serif",
            },
          },
        ],
      },
    ],
    geo: {
      map: 'china',
      roam: true,
      zoom: 1,
      label: {
        normal: {
          show: true,
          textStyle: {
            color: '#fff',
          },
        },
        emphasis: {
          textStyle: {
            color: '#fff',
          },
        },
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(147, 235, 248, 1)',
          borderWidth: 1,
          areaColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(147, 235, 248, 0)',
              },
              {
                offset: 1,
                color: 'rgba(147, 235, 248, .2)',
              },
            ],
            globalCoord: false,
          },
          shadowColor: 'rgba(128, 217, 248, 1)',
          shadowOffsetX: -2,
          shadowOffsetY: 2,
          shadowBlur: 10,
        },
        emphasis: {
          areaColor: '#389BB7',
          borderWidth: 0,
        },
      },
      regions: [],
    },
    series: [
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        showEffectOn: 'render',
        rippleEffect: {
          period: 15,
          scale: 4,
          brushType: 'fill',
        },
        hoverAnimation: true,
        itemStyle: {
          normal: {
            color: '#FFC848',
            shadowBlur: 10,
            shadowColor: '#333',
          },
        },
        data: [
          {
            id: '82a408c6-4510-4675-a2d3-6ceb4888af51',
            name: '深圳妇幼',
            value: ['114.093994', '22.549619', null],
            major: '张三',
            telephone: '13800000000',
            qq: '11111111',
          },
          {
            id: '8f81e23d-50ff-4ee4-be3c-a03c1c14215d',
            name: '厦门二院',
            value: ['118.110990', '24.590408', null],
            major: '张三',
            telephone: '13800000000',
            qq: '11111111',
          },
        ],
      },
    ],
  };

  echarts.registerMap('china', zhongguo as unknown as string);
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(mapOption);
  myChart.on('click', (param) => {
    echarts.registerMap(param.name, cityMap[param.name] as string);
  });
  window.onresize = function () {
    myChart.resize();
  };
};
onMounted(() => {
  mapInit();
});
</script>
